@charset "utf-8";
/*外部CSS文件，第一行：控制乱码
              第二行：设置通用样式*/
/*测试：外部css文件是否关联！添加背景*/
*{
	/*所有元素存在盒模型：内外边距+边框+内容组成
	但是，有些元素默认自带外边距:body,p,ul/ol
	*/
   margin:0 ;
   padding:0 ;
   /*文字：家族，尺寸*/
   font-family: "华文彩云";
   font-size: 88px;
}
/*测试：外部css文件是否关联！添加背景*/
body{
	background-color: #7fffd4;
	/*背景属性【复合属性】：可以省略属性值的属性
	属性值：color,image,origin与size，repeat
	常用背景属性：url（）repeat；
	子属性与主属性使用一致！
	子属性：background-color 背景颜色
	       background-image 背景图片  属性值：url（图片路径），url（"",''）
		   background-size 背景尺寸 ：宽 高
		   background-repeat背景平铺 no-repeat
	背景属性与图片元素区别？
	背景属性，频繁移动的元素
	图片元素，出现固定在页面
	背景属性：用于一次性集中定义各种背景属性，包括color，image，origin与size，repeat方式等等
	*/
	background: #f00;
	background-image: url(../img/功夫熊猫img/bg.jpg);/*背景图*/
	background-repeat: no-repeat;
	background:url(../img/功夫熊猫img/bg.jpg)no-repeat ;
	background-size: 100% 125%;
}
/*熊*/
.bear{
	width:200px ;
	height:300px ;
	/*验证选择器是否选中*/
	border: 1px solid red;
	background:url(../img/功夫熊猫img/bear_1.png) ;
	background-size: 100% 100%;
	position: relative;
	left:10px ;
	top:-67px ;
	/*熊div元素添加动画：启动关键帧*/
	animation:bear 10s linear infinite;
}
/*1个动画：创建1个关键帧：特点：具体元素启动关键帧继承性
                             宽高，背景，定位属性被继承
*/
@keyframes bear{
	0%{/*初始化*/
		left: 10px;
		top: -6px;
	}
    10%{
        left:10px;
        top:-6px;
        background: url(../img/功夫熊猫img/bear_1.png);
        background-size: 100% 100%;
    }
    20%{
        left:100px;
        top:100px;
        
        background: url(../img/功夫熊猫img/bear_2.png);
        background-size: 100% 100%;
    }
    30%{ 
        left:300px;
        top:170px;
        background: url(../img/功夫熊猫img/bear_3.png);
        background-size: 100% 100%;
    }
    40%{
        left:600px;
        top:130px;
        background: url(../img/功夫熊猫img/bear_4.png);
    
    background-size: 100% 100%;
    }
    50%{
        left:800px;
        top:10px;
        background: url(../img/功夫熊猫img/bear_5.png);
    background-size: 100% 100%;
    }
    60%{
        left:900px;
        top:-100px;
        background: url(../img/功夫熊猫img/bear_6.png);
    background-size: 100% 100%;
    }
    70%{
        left:1200px;
        top:100px;
        background: url(../img/功夫熊猫img/bear_7.png);
    background-size: 100% 100%;
    }
    80%{
        left:900px;
        top:388px;
        background: url(../img/功夫熊猫img/bear_8.png);
    background-size: 100% 100%;
    }
    90%{
        left:700px;
        top:38px;
        background: url(../img/功夫熊猫img/bear_9.png);
    background-size: 100% 100%;
    }
    100%{
        left:300px;
        top:100px;
        background: url(../img/功夫熊猫img/bear_10.png);
    background-size: 100% 100%;
    }
}